import '../assets/menu.css'
import {Flex} from "antd";
import {NavLink} from "react-router-dom";
import {menuItems} from "../store/store.js";

const TopMenu = () => {
    const menus = menuItems.value
    return (
        <div id='topMenu'>
            <Flex gap={"middle"} vertical={false} align={"center"} id='baseStyle'>
                <NavLink to={`/`}
                         id='bannerStyle'
                         className={({isActive}) => isActive ? 'menuActive' : ''}
                >
                   Index
                </NavLink>
                <Flex gap={"middle"} justify={"flex-end"} align={"center"} id='menuStyle'>
                    {menus.map((item, i) => (
                        <NavLink
                            to={`${item.link}/${item.id}`}
                            key={i}
                            id='linkStyle'
                            className={({isActive}) => isActive ? 'menuActive' : ''}
                        >
                            {item.name}
                        </NavLink>
                    ))}
                </Flex>
            </Flex>
        </div>
    )
}

export default TopMenu;